<template>
    <a-modal :attrs="$attrs" v-model:open="open" @ok="onOk" @cancel="onCancel" okText="确定" cancelText="取消" :confirm-loading="loading" destroyOnClose :maskClosable="false">
        <a-form :rules="rules" :model="model" layout="vertical" ref="formRef" class="form">
            <a-alert class="error" v-if="errors.length" type="error" showIcon :message="`保存特例时发生错误：`">
                <template #description>
                    <ul>
                        <li v-for="(v, k) in errors" :key="k">{{ v }}</li>
                    </ul>
                </template>
            </a-alert>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="学号" name="Code">
                        <a-input v-model:value="model.Code" placeholder="请输入特例的学号" @change="getUserByCode" @pressEnter="getUserByCode" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="姓名" name="RealName">
                        {{ model.RealName }}
                    </a-form-item>
                </a-col>
            </a-row>
            <a-form-item label="特例结束时间" name="EndOn">
                <date-picker v-model:value="model.EndOn" format="YYYY-MM-DD HH:mm" showTime />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import app from '@/app'
import { ref, reactive, toRaw } from 'vue'
import useModal from '@/components/modals/useModal'
import axios from '@/axios'
import _ from 'lodash'
import dayjs from 'dayjs'

const {
    open, loading, 
    onOk, onCancel,
    close, showModal
} = useModal(onOpen, processor);

defineExpose({
    showModal
});

// -- 业务逻辑，点击确定后应该如何 -- //
// STEP1: 填一个空模型
const emptyModel = {
    Code: "",
    RealName: "找不到对应用户",
    EndOn: dayjs().add(1, 'day').format("YYYY-MM-DD HH:mm")
};
const model = reactive({ ...emptyModel });
// STEP2：写一下数据验证规则
const rules = {
    Code: { required: true, message: "必须填写学号" },
    RealName: {
        validator (rule, value, cb, source, options) {
            let { promise, resolve, reject} = app.withResolvers();
            if (model.RealName === "找不到对应用户") {
                reject("找不到与学号对应的用户");
            } else {
                resolve();
            }
            return promise;
        }
    }
}
const formRef = ref("");
const errors = ref([]);

function onOpen (...para) {
    errors.value = [];
    // 窗口打开时，处理这里的逻辑，onOpen的参数就是showModal输入的参数
    // STEP3：把输入的参数合并到模型里
    Object.assign(model, emptyModel);
}
const getUserByCode = _.debounce(async function () {
    errors.value = [];
    const code = model.Code;
    let msg = await axios.post("/api/proj/opt/GetUserByCode", { code });
    model.RealName = msg.data.RealName;
}, 500);

async function processor () {
    // 处理完成后，根据实际情况确认是否调用 close 关闭窗口，close的参数就是返回调用方的值
    try {
        await formRef.value.validate();
        close({ ...model });
        // STEP4：处理一下提交函数
        // let msg = await axios.post("/api/dict/SaveDictionary", model);
        // if (!msg.success) {
        //     errors.value = msg.errorStrings;
        //     return;
        // } else {
        //     Object.assign(model, emptyModel);
        //     close();
        // }
    } catch (err) {

    }
}
</script>

<style scoped lang="less"></style>